import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Card, Input } from 'antd';
import { Table } from 'antd/lib';
import React from 'react';
import styles from './index.less';
import { IFilterParams } from './interface';

export interface ICommonTable {
	loading: boolean;
	columns: Record<string, any>[];
	dataSource: Record<string, any>[];
	total: number;
	filterCondition: IFilterParams;
	isAdd?: boolean;
	placeholder?: string;
	isSearch?: boolean;
	showHeader?: boolean;
	isPagination?: boolean;
	scroll?: Record<string, any>;
	isSticky?: boolean;
	bordered?: boolean;
	isRowSelection?: boolean;
	onAdd?: () => void;
	onDelete?: (rowKey: React.Key[], selectedRows: Record<string, any>[]) => void;
	onChange?: () => void;
	setFilter: (v: IFilterParams) => void;
	[key: string]: any;
}

const CommonTable: React.FC<ICommonTable> = ({
	loading,
	columns = [],
	total = 0,
	dataSource = [],
	showHeader = true,
	scroll = {},
	onAdd,
	onDelete,
	isAdd = true,
	isSearch = true,
	isPagination = true,
	isSticky = false,
	filterCondition,
	bordered = false,
	isRowSelection = false, // 当该条件为true的时候，会展示checkbox，会自动出现批量删除按钮
	placeholder = '请输入条件',
	setFilter,
	onChange,
}) => {
	// 分页数据发生改变
	const onPageChange = (currentPage: number, pageSize: number) => {
		setFilter({ ...filterCondition, currentPage, pageSize });
	};

	// 为多选框时选中的值
	const [selectedRows, setSelectedRows] = React.useState<Record<string, any>[]>(
		[],
	);
	const [selectedRowKeys, setSelectedRowKeys] = React.useState<React.Key[]>([]);

	const rowSelectionConfig = React.useMemo(() => {
		if (!isRowSelection) {
			return null;
		}
		return {
			type: 'checkbox',
			onChange: (
				selectedRowKeys: React.Key[],
				selectedRows: Record<string, any>[],
			) => {
				setSelectedRowKeys(selectedRowKeys);
				setSelectedRows(selectedRows);
			},
		};
	}, [isRowSelection]);

	return (
		<div className={styles.commonTableBox}>
			<Card>
				{isSearch ? (
					<div className={styles.searchBox}>
						<div className={styles.searchInput}>
							<Input
								allowClear
								prefix={<SearchOutlined />}
								placeholder={placeholder}
								onPressEnter={(e: any) => {
									setFilter({ ...filterCondition, keywords: e.target.value });
								}}
							/>
						</div>
						<div className={styles.searchBtn}>
							{isRowSelection && (
								<Button
									type="primary"
									disabled={selectedRows.length === 0 ? true : false}
									danger
									onClick={() => {
										onDelete?.(selectedRowKeys, selectedRows);
										setSelectedRows([]);
									}}
								>
									批量删除
								</Button>
							)}
							{isAdd && (
								<Button type="primary" onClick={onAdd}>
									<PlusOutlined />
									新增
								</Button>
							)}
						</div>
					</div>
				) : null}

				<Table
					{...(isRowSelection ? { rowSelection: rowSelectionConfig } : null)}
					scroll={scroll}
					loading={loading}
					bordered={bordered}
					rowKey="id"
					columns={columns}
					dataSource={dataSource}
					showHeader={showHeader}
					sticky={isSticky}
					pagination={
						isPagination
							? {
									current: filterCondition.currentPage,
									total: total,
									position: ['bottomCenter'],
									pageSize: filterCondition.pageSize,
									onChange: onPageChange,
							  }
							: false
					}
				/>
			</Card>
		</div>
	);
};

export default CommonTable;
